<template>
    <view class="page-contanier">
        <view class="title">创建用户</view>
        <view class="img-box"><img src="/static/img/register-01.jpg" /></view>
        <view class="form-box">
            <up-form labelPosition="left" :model="registerForm" ref="regFormRef">
                <up-form-item label="" prop="phone" borderBottom>
                    <up-input v-model="registerForm.phone"
                        placeholder="请输入手机号码" border="none"
                    ></up-input>
			    </up-form-item>
                <up-form-item label="" prop="password" borderBottom>
                    <password-input v-model="registerForm.password"></password-input>
			    </up-form-item>
                <up-form-item label="" prop="captchaVal" borderBottom>
                    <captcha-input v-model="registerForm.captchaVal" :phone="registerForm.phone"  @afterGetCaptcha="handlerAfterGetCaptcha"/>
			    </up-form-item>
            </up-form>
            <view class="act-box">
                <up-button class="btn" shape="circle" color="#f8744d" @click="handleRegister">注 册</up-button>
            </view>
            <view class="back-act" @click="handleBack2Login">
                <up-icon  name="arrow-left-double"></up-icon>
                <view>已有账号？返回登录</view>
                
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
    import CaptchaInput from '../components/captchaInput.vue';
    import PasswordInput from '../components/PasswordInput.vue';
import { Md5Encode, MyAlert } from '../utils/utils';
import { UserRegisterReq } from '../http/user';

    const registerForm=ref({
        phone:"",
        captchaVal:"",
        password:""
    })

    const handlerAfterGetCaptcha=(data)=>{
        registerForm.value['captchaKey']=data.key
        if(process.env.NODE_ENV==="development"){
            MyAlert({title:"验证码",content:"测试 验证码为:"+data.value})
        }
        
    }

    const captchaBtnDisabled=ref(false)
    const captchaBtnTxt=ref("获取验证码")

    const captchaExpird=ref(0)

    const handleRegister=()=>{
        let postdata={...registerForm.value}
        postdata.password=Md5Encode(postdata.password)
        UserRegisterReq(postdata).then(res=>{
            MyAlert({title:"注册成功",content:"正在跳转登陆"}).finally(()=>{
                handleBack2Login()
            })
        })
    }

    const handleBack2Login=()=>{
        uni.redirectTo({
        	url:"/pages/login"
        }) 
    }

    
</script>

<style lang="scss" scoped> 
    .page-contanier{
        position: relative;  
    }  
    .back-act{
        display: flex;
        align-items: back-act;
        color: $uni-text-color-grey;
        position: fixed;
        left: 75upx;
        bottom: 140upx;
    }
    .form-box{
        margin: 0 auto;
        width: 600upx; 
        margin-top: 150upx;
        ::v-deep .u-line{
            display: none!important; 
        }
        ::v-deep .uni-input-input:focus{
            &.u-input__content{ 
                background-color: $uni-color-primary;
            }
        }
        ::v-deep .u-input__content{
            border: 4upx solid #f3f3f3;
            border-radius: 22px; 
            padding: 0 10px; 
            height: 74upx;
        }
        ::v-deep .u-input__content:hover{
            border-color: $uni-color-primary;
        }
        ::v-deep .item__body__right__content__icon{
            margin-left: 20upx;
            width: 192upx;
        }
        
    }
    .img-box{
        position: fixed;
        bottom: 0;
        width: 460upx;
        height: 460upx;
        opacity: 0.6;
        right: 0;
        image{
            width: 100%;
        }
    }
    .title {
		font-weight: bold;
		font-size: 46upx;
		text-align: center;
    	margin-top: 102upx;
	}
</style>
